<template>
  <div class="app-container">
        <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input
        v-model="listQuery.drugName"
        clearable
        class="filter-item"
        style="width: 200px"
        placeholder="请输入药品名称"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >查找
      </el-button>

      <el-button
        v-permission="['POST /admin/doctor/create']"
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleAddDrug"
      >添加
      </el-button>

    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中..."
      border
      fit
      highlight-current-row
    >
      <el-table-column
        width="140"
        align="center"
        label="ID"
        prop="id"
        sortable
      />

      <el-table-column align="center" label="疾病id" prop="illnessId"/>
      <el-table-column align="center" label="疾病名称" prop="illnessName"/>
      <el-table-column align="center" label="药品名称" prop="drugName"/>
      <el-table-column align="center" label="创建时间" prop="createTime"/>
      <el-table-column align="center" label="更新时间" prop="updateTime"/>

      <el-table-column
        align="center"
        label="操作"
        width="200"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="handleUpdateDrug(scope.row)"
          >编 辑
          </el-button>
          <el-button
            type="danger"
            size="mini"
            @click="handleDeleteDrug(scope.row)"
          >删 除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

     <!-- 分页对象 -->
     <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />

    <!-- 弹层 -->
     <el-dialog :title="dialogName + '药品'" :visible.sync="dialogFormVisible" width="40%">
       <el-form :model="form" :rules="rules" ref="form">
         <el-form-item label="药品名称" prop="drugName" :label-width="formLabelWidth">
         <el-input v-model="form.drugName" style="width: 40%" autocomplete="off"></el-input>
         </el-form-item>
        </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取 消</el-button>
         <el-button type="primary" @click="handleAdd">确 定</el-button>
       </div>
     </el-dialog>
  </div>
</template>
<style scoped>

</style>
<script>
  import { illnessDrugList, illnessDrugAdd, illnessDrugEdit, illnessDrugDel } from '@/api/drug'
  import Pagination from '@/components/Pagination'

  export default {
    name: 'Admin',
    components: { Pagination },
    data() {
      return {
        listLoading: true,
        dialogVisible: false,
        dialogContent: '',
        listQuery: {
          pageNum: 1,
          drugName: undefined,
          illnessId: undefined,
          pageSize: 20
        },
        total: 0,
        list: [],
        form: {
          id: undefined,
          drugName: '',
          illnessId: ''
        },
        formLabelWidth: '120px',
        dialogFormVisible: false,
        dialogStatus: '',
        dialogName: '',
        rules: {
          drugName: [{ required: true, message: '请输入药品名称', trigger: 'blur' }],
        },
      }
    },

    created() {
      const illnessId = this.$route.query.illnessId
      this.listQuery.illnessId = illnessId
      this.form.illnessId = illnessId
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        illnessDrugList(this.listQuery)
          .then((response) => {
            this.list = response.data.data.records
            this.total = response.data.data.total
            this.listLoading = false
          })
          .catch(() => {
            this.list = []
            this.total = 0
            this.listLoading = false
          })
      },
      handleFilter() {
        this.listQuery.pageNum = 1
        this.getList()
      },
      handleAddDrug() {
        this.dialogFormVisible = true
        this.dialogStatus = 'add'
        this.dialogName = '新增'
        if (this.dialogStatus === 'add') {
          this.form.drugName = ''
        }
      },
      handleAdd() {
        this.$refs.form.validate((valid) => {
          if(valid) {
          if(this.dialogStatus === 'add') {
          illnessDrugAdd(this.form)
          .then(() => {
            this.getList()
            this.dialogFormVisible = false
            this.$notify.success({
              title: '成功',
              message: '新增成功',
              duration: 2000,
            })
          })
          .catch((response) => {
            this.dialogFormVisible = false
            this.$notify.error({
              title: '失败',
              message: response.data.errmsg
            })
            this.getList()
          })
        }
        if (this.dialogStatus === 'update') {
          illnessDrugEdit(this.form)
          .then(() => {
            this.getList()
            this.dialogFormVisible = false
            this.$notify.success({
              title: '成功',
              message: '编辑成功',
              duration: 2000,
            })
          })
          .catch((response) => {
            this.dialogFormVisible = false
            this.$notify.error({
              title: '失败',
              message: response.data.errmsg
            })
            this.getList()
          })
        }
      }
      })
      },
      handleUpdateDrug(row) {
        this.dialogName = '编辑'
        this.dialogFormVisible = true
        this.dialogStatus = 'update'
        if (this.dialogStatus === 'update') {
          this.form.id = row.id
          this.form.drugName = row.drugName
          this.form.illnessId = row.illnessId
        }
      },
      handleDeleteDrug(row) {
      this.$confirm('是否删除药品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          illnessDrugDel(row.id)
            .then((response) => {
              this.$notify.success({
                title: '成功',
                message: '删除成功',
                duration: 2000,
              })
              this.getList()
            })
            .catch((response) => {
              this.$notify.error({
                title: '失败',
                message: response.data.errmsg
              })
            })
        })
        .catch()
      },
    }
  }
</script>
